<template>
  <div class="add-sup-chain">
    <div class="content-box">
      <div class="header flex-center">
        <span>添加币种</span>
        <i class="iconfont iconguanbi" @click="$emit('cancel')"></i>
      </div>
      <div class="search-item flex-left">
        <label>平台</label>
        <el-select
          v-model="param.platform"
          placeholder="请选择平台"
          size="small"
          filterable
          @change="getBaseToken()"
        >
          <el-option v-for="item in parallel" :key="item.id" :value="item.platform"></el-option>
        </el-select>
      </div>
      <el-transfer
        v-model="selectList"
        :data="supList"
        class="flex-center"
        :props="{
          key: 'id',
          label: 'name'
        }"
        :titles="['可选币种', '已选币种']"
        filterable
        filter-placeholder="请输入币种名称"
      ></el-transfer>
      <div class="bottom flex-center">
        <el-button size="small" type="primary" @click="submit()">确定</el-button>
        <el-button size="small" @click="$emit('cancel')">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getTokenList,
} from "../../views/CoinsManage/Coins.service.js";
import { addSupParallel } from '../../views/WalletManage/Wallet.service'
export default {
  props: ["platform_id"],
  data() {
    return {
      supList: [],
      selectList: [],
      param: {
        platform: "",
        size: 999999
      }
    };
  },
  computed: {
    parallel() {
      return this.$store.state.para_list;
    }
  },
  methods: {
    async getBaseToken() {
      const res = await getTokenList(this.param);
      this.supList = res.data.items || [];
    },
    async submit() {
      const res = await addSupParallel({
        platform_id: Number(this.platform_id),
        coin_ids: this.selectList.toString()
      });
      if (res.code === 0) {
        this.$notify.success({
          title: "提示",
          message: "添加成功"
        });
        this.$emit("success");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.add-sup-chain {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba($color: #000000, $alpha: 0.3);
  z-index: 1001;
  .content-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    min-width: 600px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    .header {
      margin-bottom: 10px;
      padding: 15px 0;
      span {
        font-weight: 600;
        font-size: 18px;
      }
      i {
        position: absolute;
        right: 10px;
        font-size: 20px;
        cursor: pointer;
        transition: 0.2s;
      }
      i:hover {
        color: #409eff;
      }
    }
    .search-item {
      padding: 0 50px 15px;
      label {
        width: 50px;
      }
    }
    .transfer-box {
      // text-align: center;
    }
    .bottom {
      margin: 30px auto;
    }
  }
}
</style>

